<template>
  <div class="wrapper" :class="type">
    <div class="title_da">您是否面临以下问题？ </div>
    <div class="title_xiao">您知道吗？您需要找对平台。 </div>
    <div class="wrappericon">
        <ul class="clearfix">
            <li>
                <img :src="require('../../../assets/img/zt/Problem1.png')">
                <div>人员不够用<span>？</span></div>
            </li>
            <li>
                <img :src="require('../../../assets/img/zt/Problem2.png')">
                <div>商铺租不出去<span>？</span></div>
            </li>
            <li>
                <img :src="require('../../../assets/img/zt/Problem3.png')">
                <div>铺源不真实<span>？</span></div>
            </li>
            <li>
                <img :src="require('../../../assets/img/zt/Problem4.png')">
                <div>报价不合理<span>？</span></div>
            </li>
            <li>
                <img :src="require('../../../assets/img/zt/Problem5.png')">
                <div>服务不完善<span>？</span></div>
            </li>
            <li>
                <img :src="require('../../../assets/img/zt/Problem6.png')">
                <div>推广力度不大<span>？</span></div>
            </li>
        </ul>
    </div>
    <div class="experience" @click="is_show()">立即获取解决方案</div>
  </div>
</template>

<script>
export default {
  name: 'CompanyProblem',
  props: {
    type: String
  },
  methods: {
    is_show () {
      this.$emit('is_show', true)
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
  width 100%
  height 9.36rem /* 468/50 */
  border-radius 5px
  padding 0rem /* 26/50 */ .4rem 0rem /* 28/50 */ .4rem
  position relative
  margin-top 1.06rem /* 53/50 */
  .title_da
    font-size .7rem /* 35/50 */
    height 1.1rem /* 55/50 */
    line-height 1.1rem /* 55/50 */
    text-align center
    font-weight 800
    color rgba(0,0,0,.9)
  .title_xiao
    font-size .28rem /* 14/50 */
    text-align center
    color rgba(0,0,0,.7)
    line-height .46rem /* 23/50 */
    margin-bottom .4rem /* 20/50 */
  .wrappericon
    width 100%
    height 7.12rem /* 356/50 */
    border-radius .1rem /* 5/50 */
    padding-top .06rem /* 3/50 */
    ul
      width 100%
      height 7.02rem /* 351/50 */
      background #ffffff
      border-radius .1rem /* 5/50 */
      margin-bottom .36rem /* 18/50 */
      padding-top .38rem /* 19/50 */
      li
        margin-bottom .3rem /* 15/50 */
        width 33%
        font-size .3rem /* 15/50 */
        text-align center
        float left
        span
          font-size .4rem /* 20/50 */
          color #F70E0E
          font-weight bold
          margin-left 2px
        img
          width 2.16rem /* 108/50 */
          height 2.16rem /* 108/50 */
  .experience
    width 84%
    position absolute
    left 8%
    bottom 0rem /* 0/50 */
    height .9rem /* 45/50 */
    line-height .9rem
    text-align center
    border-radius .1rem /* 5/50 */
    font-size .4rem /* 20/50 */
    font-weight bold
    color #fff
.one
  .wrappericon
    background #D77D50
  .experience
    background #B9480A
    border 2px solid #AD4309
    box-shadow 0px 3px 0px 0px rgba(126, 47, 4, 0.3)
.two
  .wrappericon
    background #E66D71
  .experience
    background #C3080E
    border 2px solid #B4070B
    box-shadow 0px 3px 0px 0px rgba(167, 5, 9, 0.3)
.there
  .wrappericon
    background #7AA1F1
  .experience
    background #085B95
    border 2px solid #095194
    box-shadow 0px 3px 0px 0px rgba(93, 162, 223, 0.5)
</style>
